<template>
  <div>
    <!-- 查询和其他操作 -->
    <a-card class="s-card">
      <div class="filter">
        <a-form>
          <a-row>
            <a-col :lg="8" :md="12" :sm="24">
              <a-form-item label="部门">
                <a-select v-model="listQuery.deptId" placeholder="请选择">
                  <a-select-option
                    v-for="item in departmentList"
                    :key="item.deptId"
                    :value="item.deptId"
                  >
                    {{ item.deptName }}
                  </a-select-option>

                </a-select>
              </a-form-item>
            </a-col>
            <a-col :lg="8" :xs="0">
              <a-button
                type="primary"
                @click="handleFilter"
              >查找
              </a-button>
              <a-button @click="handleReset">重置</a-button>
            </a-col>
          </a-row>
          <!-- 适配小屏幕 -->
          <a-row>
            <a-col :lg="24" :md="24" :sm="24">
              <a-button
                type="primary"
                @click="handleEdit()"
              ><a-icon type="plus" />
                新增审批设置
              </a-button>
            </a-col>
          </a-row>
          <a-row>
            <a-col :lg="0" :md="12" :sm="24">
              <a-button
                type="primary"
                @click="handleFilter"
              >查找
              </a-button>
              <a-button @click="handleReset">重置</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <div>
        <!-- 查询结果 -->
        <a-table
          ref="table"
          :loading="listLoading"
          class="s-table"
          :data-source="list"
          :row-key="record => record.departmentId"
          :locale="{ emptyText: '无符合筛选条件的筛选项，请重新筛选！' }"
          :pagination="false"
        >
          <a-table-column
            title="序号"
            data-index="index"
            class="index-td"
            align="center"
          />
          <a-table-column
            title="部门"
            data-index="departmentName"
            align="center"
          >
            <template slot-scope="text,item">
              {{ item.departmentId === -1?'所有部门': (text || $get(deptMaps, `${item.departmentId}.deptName`) || '-' ) }}
            </template>
          </a-table-column>

          <a-table-column
            title="修改时间"
            data-index="updatedTime"
            align="center"
          />
          <!-- fixed="right"-->
          <a-table-column
            key="action"
            title="操作"
            align="center"
          >
            <template slot-scope="text, record">
              <span class="primary-link" @click="handleEdit(record.departmentId)"> 编辑</span>
              <span class="primary-link" @click="handleDelete(record)"> 删除</span>
            </template>
          </a-table-column>

        </a-table>
        <!-- 分页器 -->
        <div class="pagination-container">
          <a-pagination
            :page-size="listQuery.pageSize"
            :show-total="total => `共 ${total} 条记录 第 ${listQuery.page} / ${Math.ceil(total / listQuery.pageSize)} 页`"
            :current="listQuery.page"
            :total="total"
            hide-on-single-page
            show-quick-jumper
            @change="getList"
          />
        </div>
      </div>
    </a-card>
    <TimetableExchangeSettingSave
      v-if="edit"
      ref="TimetableExchangeSettingSave"
      :data="editForm"
      @refreshDataList="edit = false || getList()"
      @dialogClosed="edit = false"
    />
  </div>
</template>
<style>
  .index-td{
    width: 70px;
  }
  .textarea-td{
    width: 21%;
  }
</style>
<script>

import { STable, PageView } from '@/components'
import { del } from '@/pages/timetable/api/timetableExchangeSettingIndex'
import { mapState } from 'vuex'
import TimetableExchangeSettingSave from '@/pages/timetable/TimetableExchangeSettingSave'
export default {
  name: 'TimetableExchangeSettingIndex',
  components: {
    STable,
    PageView,
    TimetableExchangeSettingSave
  },
  async fetch ({ app, store }) {
    if (!app.$get(store, 'state.basic.deptList.length')) app.$departmentListFunc()
  },
  data () {
    return {
      url: '/admin/timetable/z-approval/setting/page',
      list: [],
      total: 0,
      listLoading: false,
      listQuery: {
        page: 1,
        pageSize: 20
      },
      editForm: {},
      edit: false,
      downloadLoading: false,
      approvalStatusList: [],
      departmentList: []
    }
  },
  computed: {
    ...mapState({
      deptMaps: state => state.basic.deptMaps
    })
  },
  watch: {
    '$route' (t, f) {
      if (this.$get(t, 'name') === 'timetable-TimetableExchangeSettingIndex') {
        this.getList()
      }
    }
  },
  mounted () {
    this.$departmentListFunc().then(data => {
      this.departmentList = data
    })
    this.getList()
  },
  methods: {
    getList (page) {
      this.listQuery.page = page || this.listQuery.page
      this.$fetchList({
        success: (data) => {
          const arr = []
          data.forEach(item => {
            const flag = arr.some(saved => {
              if (saved.departmentId === item.departmentId) {
                if (item.isCopy) {
                  saved.copyUsers = '、' + item.copyUsers
                } else {
                  saved.approvalUsers = '、' + item.approvalUsers
                }
              }
              return saved.departmentId === item.departmentId
            })
            if (!flag) {
              arr.push({ departmentId: item.departmentId, updatedTime: item.updatedTime })
              if (item.isCopy) {
                arr[arr.length - 1].copyUsers = arr.staffName
              } else {
                arr[arr.length - 1].approvalUsers = arr.staffName
              }
            }
          })
          return arr
        }
      }, true)
    },
    handleFilter () {
      this.listQuery.page = 1
      this.getList()
    },
    handleReset () {
      this.listQuery = {
        page: 1,
        pageSize: 20
      }
      this.getList()
    },
    handleDownload () {
    },
    handleDelete (row) {
      this.$handleBtnClick(del, row.departmentId, '删除')
    },
    handleEdit (departmentId) {
      this.edit = true
      this.editForm = { departmentId: departmentId || null }
    }
  }
}
</script>
